<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打地鼠</title>
    <style>
        .box {
            width: 800px;
            height: 600px;
            background: url('./images/timg.jpg') no-repeat center;
            position: relative;
            left: 300px;
            cursor: url('./images/chuizi.png'),auto;
        }

        .box img {
            width: 130px;
            height: 130px;
            position: absolute;
            top: 100px;
            left: 140px;
            visibility: hidden;
            z-index: 2;
        }

        img:nth-child(2) {
            top: 100px;
            left: 340px;
        }

        img:nth-child(3) {
            top: 100px;
            left: 540px;
        }

        img:nth-child(4) {
            top: 250px;
            left: 140px;
        }

        img:nth-child(5) {
            top: 250px;
            left: 340px;
        }

        img:nth-child(6) {
            top: 250px;
            left: 540px;
        }

        img:nth-child(7) {
            top: 380px;
            left: 140px;
        }

        img:nth-child(8) {
            top: 380px;
            left: 340px;
        }

        img:nth-child(9) {
            top: 380px;
            left: 540px;
        } 

        button {
            width: 200px;
            height: 60px;
            position: absolute;
            top: 300px;
            left: 300px;
            background-color: red;
            border-radius: 20px;
            border: none;
            outline: none;
        }
        .times {
            width: 200px;
            height: 30px;
            background-color: yellow;
            border-radius: 20px;
            position: absolute;
            top: 100px;
            left: 100px;
            line-height: 30px;
            text-align: center;
        }

        .fens {
            width: 200px;
            height: 30px;
            background-color: yellow;
            border-radius: 20px;
            position: absolute;
            top: 100px;
            left: 500px;
            line-height: 30px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="./images/mouse.png" alt="">
        <img src="./images/mouse.png" alt="">
        <img src="./images/mouse.png" alt="">
        <img src="./images/mouse.png" alt="">
        <img src="./images/mouse.png" alt="">
        <img src="./images/mouse.png" alt="">
        <img src="./images/mouse.png" alt="">
        <img src="./images/mouse.png" alt="">
        <img src="./images/mouse.png" alt="">
        <button>点击开始游戏</button>
        <div class="times"></div>
        <div class="fens"></div>
    </div>

</body>
<script>
    var imgs = document.getElementsByTagName('img')
    var btn = document.getElementsByTagName('button')[0]
    var times = document.getElementsByClassName('times')[0]
    var fens = document.getElementsByClassName('fens')[0]
    var num = 0;
    var t1 = '';
    var t2 = '';
    var time = 10;
    var f = 0;
    times.innerText = '剩余时间：' + time + '秒！！'
    fens.innerText = '当前得分为：' + f + '分'
    btn.onclick = function () {
        time=10
        f=0
        btn.style.visibility = 'hidden'
        times.innerText = '剩余时间：' + time + '秒！！'
        fens.innerText = '当前得分为：' + f + '分'
        t2 = setInterval(function () {
            num = Math.floor(Math.random() * imgs.length)
            for (var i = 0; i < imgs.length; i++) {
                imgs[i].style.visibility = 'hidden'
                imgs[i].src = './images/mouse.png'
            }
            imgs[num].style.visibility = 'visible'
            imgs[num].onclick = function () {
                this.src = './images/mouse2.png'
                f++
                var that = this
                setTimeout(function () {
                    that.style.visibility = 'hidden'
                }, 200)
                fens.innerText = '当前得分为：' + f + '分'
            }
        }, 2000)
        t1 = setInterval(function () {
            console.log(time)
            times.innerText = '剩余时间：' + time + '秒！！'
            time--;
            if (time < 0) {
                clearInterval(t1)
                clearInterval(t2)
                btn.style.visibility = 'visible'
                for (var j = 0; j < imgs.length; j++) {
                    imgs[j].style.visibility = 'hidden'
                }
            }
            if (btn.innerText == '点击开始游戏') {
                btn.innerText = '重新开始游戏'
            }
        }, 1000)
    }
</script>

</html>